import React, { Suspense } from 'react';
import { BrowserRouter, Switch, Route } from "react-router-dom";

import CacheRoute,{ CacheSwitch } from 'react-router-cache-route'

import routes from '../routes/index';
import ErrorBoundary from "./err/ErrorBoundary";
// import Vconsole from 'vconsole'
// const vConsole = new Vconsole()

// https://blog.csdn.net/qq_37034928/article/details/107414234

function App() {
  return (
    <BrowserRouter>
      <div>
        {/* <Switch>
          {routes.map((route, i) => (
            <Route
              exact
              key={i}
              path={route.path}
              render={props => {
                document.title = route.title;
                return (
                  <ErrorBoundary>
                    <Suspense fallback={<div style={{ textAlign: 'center' }}>loading......</div>}>
                      <div className='g-box'>
                        <route.component />
                      </div>
                    </Suspense>
                  </ErrorBoundary>
                )
              }} />
          ))}
        </Switch> */}
           
           <CacheSwitch>
          {routes.map((route, i) => ( 
              route.path =="/customerInventory" ?(
                <CacheRoute
                exact
                key={i}
                path={route.path}
                render={props => {
                  document.title = route.title;
                  return (
                    <ErrorBoundary>
                      <Suspense fallback={<div style={{ textAlign: 'center' }}>loading......</div>}>
                        <div className='g-box'>
                          <route.component />
                        </div>
                      </Suspense>
                    </ErrorBoundary>
                  )
                }} />
              ) :(
                <Route 
                exact
                key={i}
                path={route.path}
                render={props => {
                  document.title = route.title;
                  return (
                    <ErrorBoundary>
                      <Suspense fallback={<div style={{ textAlign: 'center' }}>loading......</div>}>
                        <div className='g-box'>
                          <route.component />
                        </div>
                      </Suspense>
                    </ErrorBoundary>
                  )
                }} />
              )
                   
          ))}
        </CacheSwitch>


      </div>
    </BrowserRouter>
  );
}

export default App;